<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<meta charset="UTF-8">
	<title>样式规范</title>
    <!--[if lte IE 8]>
        <script type="text/javascript" src="ie-es5.js"></script>
    <![endif]-->
    <link rel="stylesheet/less" type="text/css" href="ecui.css" />
    <link rel="stylesheet/less" type="text/css" href="common.css">
    <script type="text/javascript" src="options.js"></script>
    <script type="text/javascript" src="ecui.js"></script>
    <script>
    ecui.onready = function () {
        ecui.get('ttt').onclick = function () {
            document.getElementById('click').innerHTML=Date.now();
        };
        ecui.get('ttt').onmousedown = function () {
            document.getElementById('mousedown').innerHTML=Date.now();
        };
        ecui.get('ttt').onmouseup = function () {
            document.getElementById('touchend').innerHTML=Date.now();
        };
    };
    </script>
    <style>

.ui-calendar-input-options {
    display: inline-block;
    

    .ui-calendar-header {
        position: relative;
        width: auto;
        height: 45px;
        line-height: 45px;
        font-size: 0px;
        border: 1px solid #cccccc;
        text-align: center;
        background: #ffffff;
        margin-left: -12px;

        .ui-button {
            width: 60px;
        }
        .ui-button.ui-calendar-title {
            width: 80px;
        }
    }
    .ui-calendar {
        width: auto;
        font-size: 0;
        padding: 0 12px;
        background: #ffffff;
        padding: 0;
        .ui-monthview {
            width: 234px;
            display: inline-block;
            vertical-align: middle;
        }
        .ui-listbox {
            display: inline-block;
            vertical-align: middle;
            font-size: 14px;
            width: 25%;
            height: 240px;
            overflow-y: auto;

            .ui-item {
                text-align: center;
                height: 30px;
                line-height: 30px;
                cursor: pointer;
            }
            .ui-item-hover {
                color: #ffffff;
                background-color: #368cda;
            }

            .ui-item-focus,
            .ui-item-selected {
                color: #368cda;
                background-color: #ffffff;
            }
        }
    }   

    .options-content{
        position: relative;
        height:50px;
        line-height:50px;
        background:#fff;
        border: 1px solid #cccccc;
        border-top:none;

        .time-title{
            display: inline-block;
            vertical-align: middle;
            width:100px;
            height:22px;
            line-height:22px;
            text-align: center;
            border: 1px solid #acbaca;
            border-right:none;
            font-size:14px;
        }
        .clear{
            position: absolute;
            right: 100px;
            display: inline-block;
            vertical-align: middle;
            font-size:14px;
            color:rgba(81, 163, 81, 1);
            cursor: pointer;
            &:hover{
                color:rgba(81,189, 81, 1);
            }
        }
        .submit{
            position: absolute;
            right: 50px;
            position: absolute;
            display: inline-block;
            vertical-align: middle;
            padding-left:15px;
            font-size:14px;
            cursor: pointer;
            color:rgba(81, 163, 81, 1);
            &:hover{
                color:rgba(81,189, 81, 1);
            }
        }
    }
}


.ui-calendar-input-options {
  display: inline-block;
}
.ui-calendar-input-options .ui-calendar-header {
  position: relative;
  width: auto;
  height: 45px;
  line-height: 45px;
  font-size: 0px;
  border: 1px solid #cccccc;
  text-align: center;
  background: #ffffff;
  margin-left: -12px;
}
.ui-calendar-input-options .ui-calendar-header .ui-button {
  width: 60px;
}
.ui-calendar-input-options .ui-calendar-header .ui-button.ui-calendar-title {
  width: 80px;
}
.ui-calendar-input-options .ui-calendar {
  width: auto;
  font-size: 0;
  padding: 0 12px;
  background: #ffffff;
  padding: 0;
}
.ui-calendar-input-options .ui-calendar .ui-monthview {
  width: 234px;
  display: inline-block;
  vertical-align: middle;
}
.ui-calendar-input-options .ui-calendar .ui-listbox {
  display: inline-block;
  vertical-align: middle;
  font-size: 14px;
  width: 25%;
  height: 240px;
  overflow-y: auto;
}
.ui-calendar-input-options .ui-calendar .ui-listbox .ui-item {
  text-align: center;
  height: 30px;
  line-height: 30px;
  cursor: pointer;
}
.ui-calendar-input-options .ui-calendar .ui-listbox .ui-item-hover {
  color: #ffffff;
  background-color: #368cda;
}
.ui-calendar-input-options .ui-calendar .ui-listbox .ui-item-focus,
.ui-calendar-input-options .ui-calendar .ui-listbox .ui-item-selected {
  color: #368cda;
  background-color: #ffffff;
}
.ui-calendar-input-options .options-content {
  position: relative;
  height: 50px;
  line-height: 50px;
  background: #fff;
  border: 1px solid #cccccc;
  border-top: none;
}
.ui-calendar-input-options .options-content .time-title {
  display: inline-block;
  vertical-align: middle;
  width: 100px;
  height: 22px;
  line-height: 22px;
  text-align: center;
  border: 1px solid #acbaca;
  border-right: none;
  font-size: 14px;
}
.ui-calendar-input-options .options-content .clear {
  position: absolute;
  right: 100px;
  display: inline-block;
  vertical-align: middle;
  font-size: 14px;
  color: #51a351;
  cursor: pointer;
}
.ui-calendar-input-options .options-content .clear:hover {
  color: #51bd51;
}
.ui-calendar-input-options .options-content .submit {
  right: 50px;
  position: absolute;
  display: inline-block;
  vertical-align: middle;
  padding-left: 15px;
  font-size: 14px;
  cursor: pointer;
  color: #51a351;
}
.ui-calendar-input-options .options-content .submit:hover {
  color: #51bd51;
}


    </style>
</head>
<body style="overflow: auto">


<input ui="type:b-date-time;" value="2018-12-04 12:00:00" />

<div ui="type:b-img-fill;src:images/ecui/icons.png" style="width: 100px;height: 100px;"></div>
<div ui="type:b-img-fill;" style="width: 100px;height: 100px;"><img src="images/ecui/icons.png"></div>

    <div ui="type:m-panel" style="overflow:auto;height:100%">
    <form name="testForm">
        <input value="123" style="border:1px solid black;width:120px;height:20px;">
    </form>
    <h6 ui="ext-link" href="http://www.baidu.com">事件穿透，红框是遮罩层</h2>
    <a ui="type:control;id:ttt" href="javascript:void(document.getElementById('href').innerHTML=Date.now())"><div style="position:relative;width:200px;height:200px;border:1px solid black">
        touchend: <span id="touchend"></span><br>
        href: <span id="href"></span><br>
        mousedown: <span id="mousedown"></span><br>
        click: <span id="click"></span><br>
    </div></a>
    <div ui="type:control" style="position:absolute;left:30px;top:30px;width:80px;height:80px;border:1px solid red;pointer-events:none;content:'pointer-events:none';filter:pointer-events:none"></div>
    <div ui="type:control" style="position:absolute;left:25px;top:25px;width:80px;height:80px;border:1px solid red;pointer-events:none;content:'pointer-events:none';filter:pointer-events:none"></div>
    <div ui="type:control" style="position:absolute;left:20px;top:20px;width:80px;height:80px;border:1px solid red;pointer-events:none;content:'pointer-events:none';filter:pointer-events:none"></div>
    <div ui="type:control" style="position:absolute;left:15px;top:15px;width:80px;height:80px;border:1px solid red;pointer-events:none;content:'pointer-events:none';filter:pointer-events:none"></div>
    <div ui="type:control" style="position:absolute;left:10px;top:10px;width:80px;height:80px;border:1px solid red;pointer-events:none;content:'pointer-events:none';filter:pointer-events:none"></div>
    <div ui="type:MCalendar">
        <div ui="values:2000-2040;format:{0}年"></div>
        <div ui="values:1-12"></div>
        <div ui="values:1-31"></div>
    </div>
    <div ui="type:multi-select;name:index" style="width:200px;height:30px;border:1px solid black">
        <div style="display:block">1</div>
        <div style="display:block">2</div>
        <div style="display:block">3</div>
        <div style="display:block">4</div>
        <div style="display:block">5</div>
        <div style="display:block">6</div>
        <div style="display:block">7</div>
    </div>
    <h2>移动端select与焦点图</h2>
    <div ui="type:select;name:sex;value:male,female">
        <div ui="value:male">男</div>
        <div ui="value:female">女</div>
        <div>测试选项A</div>
        <div>测试选项B</div>
        <div>测试选项C</div>
        <div>测试选项D</div>
        <div>测试选项E</div>
        <div>测试选项F</div>
    </div>
    <div ui="type:m-carousel" style="width:100%;height:120px" id="test">
        <img ui="type:m-photo-hotspot" src="http://www.baidu.com/img/bd_logo1.png" title="百度">
        <img ui="type:m-photo-hotspot" src="http://img1.yixinfinance.com/taoche/yxgroup/common/images/yxgroup-logo.html.png" title="易鑫">
    </div>
    <h2>PC端常用组件</h2>
    <!--table-->
    <div ui="type:table;id:test;left-lock:1;head-float:true;right-lock:1">
      <table style="width:600px">
        <!-- 表头区域 -->
        <thead>
          <tr>
            <th style="width:25%;">公司名</th>
            <th style="width:25%;">url</th>
            <th style="width:25%;">地址</th>
            <th style="width:25%;">创办时间</th>
          </tr>
        </thead>
        <!-- 内容行区域 -->
        <tbody>
          <tr>
            <td>百度</td>
            <td>www.baidu.com</td>
            <td>中国北京中关村</td>
            <td>1999</td>
          </tr>
          <tr>
            <td>百度</td>
            <td>www.baidu.com</td>
            <td>中国北京中关村</td>
            <td>1999</td>
          </tr>
          <tr>
            <td>百度</td>
            <td>www.baidu.com</td>
            <td>中国北京中关村</td>
            <td>1999</td>
          </tr>
        </tbody>
      </table>
    </div>
    
    <br>
    <br>
   <!--蓝色按钮-->
   <div ui="type:button;" class="blue-btn">normal</div>
   <div ui="type:button;capturable:false" class="blue-btn-hover">hover</div>
   <div ui="type:button;capturable:false" class="blue-btn-active">pressed</div>
   <div ui="type:button;capturable:false;disabled" class="blue-btn">disabled</div>
   <br>
   <br>
   <!--白色按钮-->
   <div ui="type:button;" class="white-btn">normal</div>
   <div ui="type:button;capturable:false" class="white-btn-hover">hover</div>
   <div ui="type:button;capturable:false" class="white-btn-active">pressed</div>
   <div ui="type:button;capturable:false;disabled" class="white-btn">disabled</div>
   <br>
   <br>
   <!--checkbox-->
    <input ui="type:checkbox;" class="ui-checkbox">
    <input ui="type:checkbox;capturable:false" class="ui-checkbox-checked">
    <input ui="type:checkbox;capturable:false;disabled">
    <input ui="type:checkbox;capturable:false;disabled" class="ui-checkbox-checked">
    <br>
    <br>
    <!--select-->
    <select ui="type:select;" class="ui-select">
        <option>管理员</option>
        <option>管理员</option>
    </select> 
    <select ui="type:select;capturable:false" class="ui-select-hover">
        <option>管理员</option>
    </select>
    <select ui="type:select;capturable:false" class="ui-select-active">
        <option>管理员</option>
    </select>
    <select ui="type:select;capturable:false;disabled" class="">
        <option>管理员</option>
    </select>
    <div ui="type:select">
        <div ui="ext-anchor:a">管理员</div>
        <div ui="ext-anchor:b">管理员</div>
    </div>
    <br>
    <br>  
    <!--text-->  
    <input ui="type:text;" class="" placeholder="输入框">  
    <input ui="type:text;capturable:false" class="ui-text-hover">   
    <input ui="type:text;capturable:false" class="ui-text-active"> 
    <input ui="type:text;capturable:false;disabled">
    <!-- <div ui="disabled:true">  
        <input ui="type:text;capturable:false">
    </div>
    <div>  
        <input ui="type:text;valid:blur;len:2" value = "11" placeholder="请输入2char">
    </div> -->
    <br>
    <br> 
    <!--radio-->
    <input ui="type:radio;" class="ui-radio">
    <input ui="type:radio;capturable:false" class="ui-radio-checked">
    <input ui="type:radio;capturable:false;disabled">
    <input ui="type:radio;capturable:false;disabled" class="ui-radio-checked">
    <br>
    <br>
    <!--dialog-->
    <div ui="type:dialog;">
        <strong>
          样式规范
        </strong>
    </div>
    <br>
    <br>
    <!--calender-->
    <div ui="type:month-view;"></div>
    <br>
    <br> 
    <div ui="type:calendar-input;"></div>
    <br>
    <br> 
    <div ui="type:calendar;"></div>
    <br>
    <br>
    <!--combox-->
    <div ui="type:combox"></div>
    <br>
    <br>
    <!--tab-->
    <div ui="type:tab;selected:1;ext-anchor:test">
        <!-- 包含容器的选项卡 -->
        <div>
            <strong>标题1</strong>
            <!-- 这里是容器 -->
            content1
        </div>
        <div>
            <strong>标题2</strong>
            <!-- 这里是容器 -->
            content2
        </div>
        <!-- 仅有标题的选项卡，以下selected定义与控件定义是一致的，可以忽略其中之一 -->
        <!-- <strong ui="selected:true">标题2</strong> -->
    </div>
    <br>
    <br>
    </div>

<div ui="type:calendar-input"></div>


    <div ui="type:table">
      <table>
        <!-- 表头区域 -->
        <thead ui="ext-floatTop">
          <tr>
            <th style="width:200px;">公司名</th>
            <th style="width:200px;">url</th>
            <th style="width:250px;">地址</th>
            <th style="width:100px;">创办时间</th>
          </tr>
        </thead>
        <!-- 内容行区域 -->
        <tbody>
          <tr>
            <td>百度</td>
            <td>www.baidu.com</td>
            <td>中国北京中关村</td>
            <td>1999</td>
          </tr>
          <tr>
            <td>百度</td>
            <td>www.baidu.com</td>
            <td>中国北京中关村</td>
            <td>1999</td>
          </tr>
          <tr>
            <td>百度</td>
            <td>www.baidu.com</td>
            <td>中国北京中关村</td>
            <td>1999</td>
          </tr>
          <tr>
            <td>百度</td>
            <td>www.baidu.com</td>
            <td>中国北京中关村</td>
            <td>1999</td>
          </tr>
          <tr>
            <td>百度</td>
            <td>www.baidu.com</td>
            <td>中国北京中关村</td>
            <td>1999</td>
          </tr>
          <tr>
            <td>百度</td>
            <td>www.baidu.com</td>
            <td>中国北京中关村</td>
            <td>1999</td>
          </tr>
          <tr>
            <td>百度</td>
            <td>www.baidu.com</td>
            <td>中国北京中关村</td>
            <td>1999</td>
          </tr>
          <tr>
            <td>百度</td>
            <td>www.baidu.com</td>
            <td>中国北京中关村</td>
            <td>1999</td>
          </tr>
          <tr>
            <td>百度</td>
            <td>www.baidu.com</td>
            <td>中国北京中关村</td>
            <td>1999</td>
          </tr>
          <tr>
            <td>百度</td>
            <td>www.baidu.com</td>
            <td>中国北京中关村</td>
            <td>1999</td>
          </tr>
          <tr>
            <td>百度</td>
            <td>www.baidu.com</td>
            <td>中国北京中关村</td>
            <td>1999</td>
          </tr>
          <tr>
            <td>百度</td>
            <td>www.baidu.com</td>
            <td>中国北京中关村</td>
            <td>1999</td>
          </tr>
        </tbody>
      </table>
    </div>

    <script>
    ecui.esr.onready = function () {
    };
    </script>
</body>
</html>

